<template>
    <el-tabs tab-position="left">
        <el-tab-pane label="评分规则">
            <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
                <el-table-column prop="date" label="告警类别" width="180" />
                <el-table-column prop="name" label="告警等级" width="180" />
                <el-table-column prop="address" label="评分规则" />
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="告警等级">
            <el-form :model="queryParams" :inline="true" label-width="100px">
                <el-form-item label="告警名称" prop="alarmTitle">
                    <el-input v-model="queryParams.alarmTitle" placeholder="请输入告警名称" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="listAlarmLevelList">查询</el-button>
                    <el-button @click="unsetQueryForm"><el-icon>
                            <RefreshRight />
                        </el-icon>重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="coefficientTable" style="width: 100%;">
                <el-table-column prop="alarmTitle" label="告警名称" />
                <el-table-column prop="alarmLevel" label="告警等级" />
                <el-table-column prop="ruleType" label="规则类型" />
                <el-table-column prop="manufacturer" label="厂家" />
                <el-table-column prop="impact" label="对业务的影响" />
                <el-table-column prop="suggestion" label="处理建议" />
            </el-table>
            <!-- <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 50, 100, 200]" :small="small" layout="total, sizes, prev, pager, next" :total="total"
                @size-change="listAlarmLevelList" @current-change="listAlarmLevelList" /> -->
            <pagination v-show="total > 0" :total="total" v-model:page="currentPage" v-model:limit="pageSize"
                @pagination="listAlarmLevelList" :autoScroll="false" />
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>

import { ref } from "vue";
import { queryAlarmLevelList } from "@/api/biz/networkAlarm";

const tableData = [
    {
        date: '当前存在告警',
        name: '一级告警',
        address: '-100分',
    },
    {
        date: '当前存在告警',
        name: '二级告警',
        address: '-60分,历时每增加1天加扣5分',
    },
    {
        date: '当前存在告警',
        name: '三级告警',
        address: '-30分,历时每增加1天加扣3分',
    },
    {
        date: '过去10日历史告警',
        name: '一级告警',
        address: '过去10天发生天数大于等于3天,且近5日仍在发生,-100分',
    },
    {
        date: '过去10日历史告警',
        name: '二级告警',
        address: '过去10天发生天数大于等于3天,且近5日仍在发生,-60分',
    },
    {
        date: '过去10日历史告警',
        name: '三级告警',
        address: '过去10天发生天数大于等于3天,且近5日仍在发生,-30分',
    },

]
const coefficientTable = ref([])
const queryParams = ref({})
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
//const ruleType = ref(0)

function listAlarmLevelList() {
    let param = {}
    param.alarmTitle = queryParams.value.alarmTitle
    param.pageSize = pageSize.value
    param.pageNum = currentPage.value
    queryAlarmLevelList(param).then(res => {
        coefficientTable.value = res.rows
        total.value = res.total
    })
}

function unsetQueryForm() {
    //重置
    queryParams.value = {
        alarmTitle: "",
    }
}
listAlarmLevelList()

</script>
<style>
.spacer {
    margin: 20px 0;
    /* 上下间距20px，左右自动 */
    border: none;
    /* 如果不需要边框，则设置为none */
}
</style>
